<template>
  <div class="dashboard">
        <h2 class="header"><el-icon><House /></el-icon> 首页</h2>
        <el-row :gutter="24">
            <el-col :span="6">
                <div class="card-panel-col" @mouseover="curDiv = 1" @mouseout="curDiv = 0">
                    <el-row class="card-panel" type="flex" align="middle">
                        <el-col :span="12">
                            <div class="card-panel-icon">
                                <el-icon class="icon icon1" :style="curDiv === 1 ? 'background-color: #40c9c6; color: white' : ''">
                                     <User />
                                </el-icon>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="card-panel-description">
                                <div class="description">
                                    <div class="card-panel-text">用户数量</div>
                                    <span class="card-panel-num">40000</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="card-panel-col" @mouseover="curDiv = 2" @mouseout="curDiv = 0">
                    <el-row class="card-panel" type="flex" align="middle">
                        <el-col :span="12">
                            <div class="card-panel-icon">
                                <el-icon class="icon icon2"
                                     :style="curDiv === 2 ? 'background-color: #36a3f7; color: white' : ''">
                                     <HelpFilled />
                                </el-icon>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="card-panel-description">
                                <div class="description">
                                    <div class="card-panel-text">考试班级</div>
                                    <span class="card-panel-num">200</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="card-panel-col" @mouseover="curDiv = 3" @mouseout="curDiv = 0">
                    <el-row class="card-panel" type="flex" align="middle">
                        <el-col :span="12">
                            <div class="card-panel-icon">
                                <el-icon class="icon icon3 el-icon-s-order"
                                     :style="curDiv === 3 ? 'background-color: #f4516c; color: white' : ''">
                                     <Tickets />
                                </el-icon>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="card-panel-description">
                                <div class="description">
                                    <div class="card-panel-text">试卷数目</div>
                                    <span class="card-panel-num">10</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="card-panel-col" @mouseover="curDiv = 4" @mouseout="curDiv = 0">
                    <el-row class="card-panel" type="flex" align="middle">
                        <el-col :span="12">
                            <div class="card-panel-icon">
                                <el-icon class="icon icon4 el-icon-s-platform"
                                     :style="curDiv === 4 ? 'background-color: orange; color: white' : ''">
                                     <Postcard />
                                </el-icon>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="card-panel-description">
                                <div class="description">
                                    <div class="card-panel-text">题库数目</div>
                                    <span class="card-panel-num">10000</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>

      <div class="exam-chart">
        <div class="main" ref="examChart"></div>
      </div>

    </div>
</template>

<script>
let echarts = require('echarts/lib/echarts');//引入echarts
require('echarts/lib/chart/bar'); //引入柱状图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legend');
require('echarts/lib/component/title');

import {ref, reactive, onMounted} from 'vue'
export default {

  setup(){
    const examChart=ref(null)
    onMounted(()=>{
      initEcharts()
      console.log(examChart.value)
    })
      let curDiv = ref(-1)
      function  initEcharts(){
        // let _this =this;
        // let mainDiv = _this.$refs.main; //找到绘制的区域,强烈推荐使用refs
        // let mainDiv=echarts
        let myChart = echarts.init(examChart.value); //初始化
        myChart.setOption({ //官网例子
          title: {
            text: '最近 8 场考试人数统计'
          },
          tooltip: {},
          legend: {
            data: ['应考人数', '参考人数']
          },
          xAxis: {
            data: ['2020湘潭的发生的发生大学研', '2020湘潭大学研究生复试', '2023C语言重修重考（本部）', '2023数学重修重考（本部）', '高跟鞋','sda','sdadsddsdsd','dasdasdasd','6565','hgfhf'],
            name: "考试名称",//坐标轴名称。
            nameLocation:'end',//坐标轴名称显示位置。
            axisLabel : {//坐标轴刻度标签的相关设置。
              //0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签
              interval: 0,
              formatter: function(value) {
                // console.log(value);
                var valueDetal = value.split("-").join("");
                // console.log(valueDetal);
                var ret = ""; //拼接加\n返回的类目项
                var maxLength = 10//每项显示文字个数
                var valLength = valueDetal.length; //X轴类目项的文字个数
                // console.log(valLength);
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) { //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = ""; //每次截取的字符串
                    var start = i * maxLength; //开始截取的位置
                    var end = start + maxLength; //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = valueDetal.substring(start, end) + "\n";
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                } else {
                  return valueDetal;
                }
              }
            }
          },
          yAxis: {
            name: "人数"
          },
          series: [{
            name: '应考人数',
            type: 'bar',
            data: [5, 20, 36, 10, 1001,454,454,88,77,77]
          }, {
            name: '参考人数',
            type: 'bar',
            data: [5, 20, 36, 10, 1001,42,11,89,78,77]
          }]
        });
      }
      return{examChart,
        initEcharts,
            curDiv
        }
    }
}
</script>

<style scoped>

    .header {
        color: #454;
        margin: 0 0 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #dedede;
    }

    .card-panel-col {
        padding: 0 20px;
        margin-bottom: 32px;
    }

    .card-panel-col .card-panel {
        background-color: white;
        padding: 20px;
        height: 120px;
        cursor: pointer;
    }

    .card-panel-col .card-panel-icon .icon {
        font-size: 50px;
        padding: 10px;
        border-radius: 10px;
    }

    .icon1 {
        color: #40c9c6;
    }

    .icon2 {
        color: #36a3f7;
    }

    .icon3 {
        color: #f4516c;
    }

    .icon4 {
        color: orange;
    }

    .card-panel-col .card-panel-description .description {
        font-weight: bold;
        padding: 10px;
    }

    .card-panel-text {
        color: rgba(0, 0, 0, 0.45);
        line-height: 18px;
        margin-bottom: 12px;
    }

    .card-panel-num {
        font-size: 20px;
        color: #666;
    }

    .exam-chart {
        height: 100%;
        margin: 0 20px;
        padding: 20px;
        background-color: white;
    }

    .exam-chart .main {
        width: 100%;
        height: 360px;
    }

</style>
